<template>
	<view class="bg-fff radius20 pl20 pr20" :class="boxClass">
		<u-form ref="uForm" label-width="auto" :label-style="{color: '#666'}" v-if="formList">
			<view v-if="!item.hide" v-for="(item,index) in formList" :key="index" :class="item.class||''">
				<u-form-item :label="item.formName||item.name" :borderBottom="item.borderBottom"
					:rightIcon="item.rightIcon||''" :labelPosition="item.labelPosition||'left'">
					<view class="flex w-max" :class="{'row-right':item.inputAlign!='left'}" v-if="item.type=='img'">
						<imgList :width="item.width" :height="item.height" :size="item.size||180" :src="item.src"
							:max="item.max||1" :hideBor="item.hideBor" @success="setImg(item,$event)"
							:ids="item.value_id" :paths="item.value" />
					</view>
					<view class="flex w-max" :class="{'row-right':item.inputAlign!='left'}"
						v-else-if="item.type=='radio'">
						<label class="ml20"
							@click="item.value=item2.id,item.radioClick&&click(item.radioClick,item,item2)"
							v-for="(item2,index2) in item.radioList" :key="index2">
							<radio :checked="item.value===item2.id" class="scale7" /><text>{{item2.name}}</text>
						</label>
					</view>

					<u-input v-else :inputAlign="item.inputAlign||'right'" :clearable="false" :type="item.type"
						:selectOpen="item.listShow" v-model="item.value" :placeholder="item.placeholder"
						:disabled="item.disabled" @click="item.click&&click(item.click,item)"
						:maxlength="item.maxlength||100" />
				</u-form-item>
				<block v-if="item.list">
					<u-select v-model="item.listShow" :list="item.list||[]" @confirm="confirm(item,$event)"
						:title="item.placeholder" mode="mutil-column-auto" :num="item.listNum||''"
						:labelName="item.labelName||'label'" :childName="item.childName||'child'"
						:valueName="item.valueName||'value'" />
				</block>
				<block v-if="item.field=='expect_time'">
					<u-picker mode="time" v-model="item.listShow" :params="item.timeParams"
						@confirm="confirmPicker(item,$event)" />
				</block>
			</view>
		</u-form>
	</view>
</template>

<script>
	//<form-list ref="form" :list="list" />
	// let form = this.$refs.form.submit()
	// if(!form)return
	export default {
		name: "form-list",
		props: {
			list: {
				default: ''
			},
			boxClass: {
				default: ''
			}
		},
		data() {
			return {
				formList: ''
			};
		},
		created() {
			let arr = this.list.map((item, index) => {
				item.value = this.isKong(item.value)
				item.value_id = this.isKong(item.value_id)
				item.rightIcon = (item.rightIcon ?? '') !== '' ? item.rightIcon : 'arrow-right'
				let place = "请输入"
				if (item.type == 'select') {
					place = '请选择'
				}
				// if (item.type == "textarea") {
				// 	item.labelPosition = 'top'
				// 	item.inputAlign = 'left'
				// }
				if (item.list) {
					item.listShow = false
					item.click = (item2) => {
						item2.listShow = !item2.listShow
					}
				}
				item.placeholder = item.placeholder || place + item.name
				return item
			})
			this.formList = this.$u.deepClone(arr)
		},
		updated() {

		},
		methods: {
			click(fun, ...item) {
				fun(...item)
			},
			setImg(item, ids) {
				item.value_id = ids
			},
			confirm(item, event) {
				let arr = event.reverse()
				let aa = arr.find(it => it.label)
				item.value = aa.label
				item.value_id = aa.value || ''
			},
			submit() {
				let form = {}
				let res = this.formList.find(item => {
					let value = ''
					if (item.child) {
						value = item.child.map(item2 => {
							let aa = {}
							item2.map(it3 => aa[it3.field] = it3.value)
							return aa
						})
					} else {
						value = this.isKong(item.value_id, item.value)
					}
					item.field ? form[item.field] = value : ''
					if (item.required) {
						return form[item.field] == ''
					}
				})
				if (res) {
					this.$msg(res.placeholder)
					return false
				}
				return form
			},
			isKong(value, value2 = '') {
				return (value ?? '') !== '' ? value : value2
			}
		}

	}
</script>

<style lang="scss">

</style>
